<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-21 14:08:57
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-26 11:28:06
 * @FilePath: \客户端\app\src\views\Article\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEicle
-->
<template>
  <div class="content">
    <div class="main">
      <div class="left">
        <el-card class="articleLists">
          <div class="top">
            <h4>归档</h4>
            <p>共计{{total}}篇</p>
          </div>
           
           <div class="title">
            <h2>{{dateYear}}</h2>
            <ul v-for="( v,i ) in data" :key="i">
              <li @click="detail(v)">{{dateYear}} <b>{{v.title}}</b></li>
            </ul>
           </div>
        </el-card>
      </div>
      
      <div class="text">
        <RightBox />
      </div>
    </div>
  </div>
</template>
<script>
import RightBox from "../../components/RightBox.vue";
import { formatTime } from '../../utils/moment'
import { asyncArticleLists} from '../../api/article'
export default {
  components: {
    RightBox,
  },
  data() {
    return {
      time: new Date(),
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      data:[],
      total:0,
    };
  },
 

  created() {
    this.timeFn();
    this.getArticleLists()
  },
  methods: {
     async getArticleLists() {
      const res = await asyncArticleLists("/articleImg");
      console.log(res, "llll");
      this.data = res.data.list;
      this.total=res.data.total
      console.log(res.data.total)
    },
    timeFn () {
      setInterval(() => {
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
      }, 1000)
    },
    detail(v){
      this.$router.push({
        path: "/layout/detail",
        query: { 
          detailId:v.id,
        },
      });
    }
  },
};
</script>
<style lang="less" scoped>
li:hover {
  color: #ff0064;
  cursor: pointer;
}


@media (min-width: 1200px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      .left {
        width: 50%;
        height: 100%;
        margin-left: 130px;
      }
      .articleLists {
        width: 100%;
        margin-left: 10px;
        margin-top: 20px;

        .top {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-items: center;
          flex-shrink: 0;
          h4 {
            color: #ff0064;
          }
        }

        .title{
           padding:10px;
          ul{
            padding:10px;
            li{
              list-style: disc;
              padding: 10px;
              b{
                margin-left: 10px;
              }
            }
          }
        }
      }
      // 右侧
      .text {
        width: 25%;
        margin: 20px;
        position: fixed;
        top: 70px;
        right: 150px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 12px;
        .text-one {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
        .text-two {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          margin-top: 20px;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

@media (min-width: 870px) and (max-width: 1200px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 70%;
      margin-left: auto;
      margin-right: auto;

      .left {
        width: 55%;
        height: 100%;
        margin-left: 20px;

        .articleLists {
          width: 100%;
          // margin-left: 0px;
          margin-top: 20px;

           .top {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-items: center;
          flex-shrink: 0;
          h4 {
            color: #ff0064;
          }
        }

        .title{
           padding:10px;
          ul{
            padding:10px;
            li{
              list-style: disc;
              padding: 10px;
              b{
                margin-left: 10px;
              }
            }
          }
        }
        }
      }
      .text {
        width: 25%;
        margin: 20px;
        position: fixed;
        top: 60px;
        right: 150px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 12px;
        .text-one {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
        .text-two {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          margin-top: 20px;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

@media (min-width: 20px) and (max-width: 870px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      .left {
        width: 100%;
        height: 100%;

        .articleLists {
          width: 98%;
          margin-left: 10px;
          margin-top: 20px;

           .top {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-items: center;
          flex-shrink: 0;
          h4 {
            color: #ff0064;
          }
        }

        .title{
           padding:10px;
          ul{
            padding:10px;
            li{
              list-style: disc;
              padding: 10px;
              b{
                margin-left: 10px;
              }
            }
          }
        }
        }
      }

      .text {
        display: none;
        width: 30%;
        margin: 20px;
        height: 100px;
        position: fixed;
        top: 60px;
        right: 90px;
        border: 1px solid #ccc;

        .text-one {
          width: 100%;
          height: auto;
          border: 1px solid #ccc;
          margin-top: 20px;
        }
        .text-two {
          width: 100%;
          height: auto;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
</style>

